<template>
<!--  <layout>-->
<!--  </layout>-->

  <div class="container" id="myContainer"></div>
</template>

<script>
import {defineComponent,onMounted, ref} from "vue";
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
// import Layout from "../../../components/Common/Layout";
import Layout from "../../Layout.vue";

export default defineComponent({
  name: "home",
  components: {
    Layout
  },
  setup() {
    onMounted(() => {
      // initData()
    })
    const initData = () => {
      let scene = new THREE.Scene(); // 创建场景对象
      // -----创建网格模型------
      // let geometry = new THREE.BoxGeometry(100, 100, 100) //创建一个立方体几何对象Geometry
      let geometry = new THREE.SphereGeometry(60,40,40)
      let material = new THREE.MeshLambertMaterial({  // 材质对象 material
        color: 0x000fff
      })
      let mesh = new THREE.Mesh(geometry, material)  // 网格模型对象
      scene.add(mesh)

      //-----光源------
      let point = new THREE.PointLight(0xffffff)  // 点光源
      point.position.set(100, 200, 300)   // 点光源位置
      scene.add(point)

      let ambient = new THREE.AmbientLight(0x444444); //环境光
      scene.add(ambient)

      //-----相机设置------
      let width = window.innerWidth;    //窗口宽度
      let height = window.innerHeight;  //窗口高度

      let k = width/height;             //窗口宽高比
      let s = 200;    //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
      camera.position.set(200, 200, 200) // 设置相机位置
      camera.lookAt(scene.position)  // 设置相机方向(指向的场景对象)

      //-----渲染设置------
      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);  // 设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1);  //设置背景颜色
      let myContainer = document.getElementById('myContainer')
      myContainer.appendChild(renderer.domElement); // body元素中插入canvas对象

      // 执行渲染操作 指定场景、相机作为参数
      renderer.render(scene, camera)
      mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度

      //监听鼠标、键盘事件
      let controls = new OrbitControls(camera, renderer.domElement)//创建控件对象
      controls.addEventListener('change', () => {
        renderer.render(scene, camera)
        mesh.rotateY(0.01);
      })

      // -----自动旋转setInterval------
      // setInterval(() => {
      //   renderer.render(scene, camera)
      //   mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
      // }, 20)

    }
    return {
    }
  }
})
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
}
</style>